<template>
    <div class="page-container" :class="[tagsSize ? 'move-tags--' + tagsSize : 'move-tags--mini']"
         :style="pageContainer">
        <div @click="scrollLeft" :class="[]" class="scroll"
             :style="scrollLeftColor">
            <i class="icon-font icon-arrow-left"></i>
        </div>
        <div id="box" ref="boxWidth">
            <span class="text" v-for="(item,index) in tagList"
                  :key="index" @click="onTagClick(item,index)"
                  :class="{text:index!==activeName,textChoose:index===activeName}"
                  :style="index!==activeName?(hoverIndex===index?hoverItem:itemObject):itemObjectChoose"
                  @mouseover="mouseOver(item,index)" @mouseleave="mouseLeave">{{item[options.showName]}}</span>
        </div>
        <div @click="scrollRight" :class="[]" class="scroll"
             :style="scrollRightColor">
            <i class="icon-font icon-arrow-right"></i>
        </div>
    </div>
</template>

<script>
    import '@/assets/fonts/iconfont.css'

    export default {
        name: "MoveTags",
        props: {
            tagList: {
                type: Array,
            },
            size: String,
            options: {
                type: Object,
                required: false,
                default: function () {
                    return {
                        //默认选中第index个
                        defaultSelect: Number,
                        //需要显示的属性名，默认name
                        showName: "name",
                        //左按钮默认颜色
                        leftBtnColor: "#8799a3",
                        //右按钮默认颜色
                        rightBtnColor: "#8799a3",
                        //背景默认颜色
                        tagsColor: "#2C3E50",
                        //单项item默认背景颜色
                        tagsItemColor: "#8799a3",
                        //单项item悬浮Hover时的颜色
                        tagsItemHover: "#e54d42",
                        //单项item悬浮Hover时文字的颜色
                        tagsItemHoverTextColor: "#ffffff",
                        //单项item选中默认背景颜色
                        tagsChooseItemColor: "#1cbbb4",
                        //单项item文字默认颜色
                        tagsItemTextColor: "#ffffff",
                        //单项item文字选中默认颜色
                        tagsChooseItemTextColor: "#ffffff",
                        //单项item文字字体
                        tagsItemFamily: "微软雅黑"
                    }
                }
            }
        },
        data() {
            return {
                activeName: this.options.defaultSelect - 1,
                hoverIndex: -1
            }
        },
        computed: {
            hoverItem() {
                return {
                    "color": this.options.tagsItemHoverTextColor ? this.options.tagsItemHoverTextColor : "#ffffff",
                    "backgroundColor": this.options.tagsItemHover ? this.options.tagsItemHover : "#e54d42",
                    "fontFamily": this.options.tagsItemFamily ? this.options.tagsItemFamily : "微软雅黑",
                }
            },
            itemObject() {
                return {
                    "color": this.options.tagsItemTextColor ? this.options.tagsItemTextColor : "#ffffff",
                    "backgroundColor": this.options.tagsItemColor ? this.options.tagsItemColor : "#8799a3",
                    "fontFamily": this.options.tagsItemFamily ? this.options.tagsItemFamily : "微软雅黑",
                }
            },
            itemObjectChoose() {
                return {
                    "color": this.options.tagsChooseItemTextColor ? this.options.tagsChooseItemTextColor : "#ffffff",
                    "backgroundColor": this.options.tagsChooseItemColor ? this.options.tagsChooseItemColor : "#1cbbb4",
                    "fontFamily": this.options.tagsItemFamily ? this.options.tagsItemFamily : "微软雅黑",
                }
            },
            tagsSize() {
                return this.size;
            },
            pageContainer() {
                return {
                    "backgroundColor": this.options.tagsColor ? this.options.tagsColor : "#2C3E50",
                }
            },
            scrollLeftColor() {
                return {
                    "backgroundColor": this.options.leftBtnColor ? this.options.leftBtnColor : "#8799a3",
                };
            },
            scrollRightColor() {
                return {
                    "backgroundColor": this.options.rightBtnColor ? this.options.rightBtnColor : "#8799a3",
                };
            }
        },
        mounted() {
            if (this.options.defaultSelect && this.options.defaultSelect !== 0) {
                this.$emit('get-move-tags-event', this.tagList[this.options.defaultSelect - 1]);
            }
        },
        methods: {
            onTagClick(item, index) {
                this.activeName === index ? this.activeName = -1 : this.activeName = index;
                this.$emit('get-move-tags-event', item);
            },
            scrollRight() {
                let demo = document.getElementById("box");
                if (demo.scrollLeft <= (1500 - 520))
                    demo.scrollLeft += 160;
            },
            scrollLeft() {
                let demo = document.getElementById("box");
                if (demo.scrollLeft >= 0)
                    demo.scrollLeft -= 160;
            },
            mouseOver(item, index) {
                this.hoverIndex = index;
            },
            mouseLeave() {
                this.hoverIndex = -1;
            }
        }
    }
</script>
<style>

</style>
<style scoped lang="scss">
    .page-container {
        display: flex;
        justify-content: space-between;
        /*双击取消选中文字*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
        .scroll {
            justify-content: center;
            cursor: pointer;
            align-items: center;
            display: flex;
        }
    }

    .move-tags--mini {
        width: 300px;
        height: 35px;
        .scroll {
            width: 16px;
            height: 35px;
            line-height: 35px;
        }
        #box {
            height: 100%;
            overflow: hidden;
            align-items: center;
            white-space: nowrap;
            width: calc(100% - 36px);
            .text {
                padding: 6px 14px;
                border-radius: 16px;
                margin-right: 10px;
                cursor: pointer;
                font-size: 10px;
                line-height: 35px;
            }
            .textChoose {
                padding: 6px 14px;
                border-radius: 16px;
                margin-right: 10px;
                cursor: pointer;
                font-size: 10px;
                line-height: 35px;
            }
        }
    }

    .move-tags--small {
        width: 400px;
        height: 40px;
        .scroll {
            width: 16px;
            height: 40px;
        }
        #box {
            height: 100%;
            overflow: hidden;
            align-items: center;
            white-space: nowrap;
            width: calc(100% - 36px);
            .text {
                padding: 6px 14px;
                border-radius: 16px;
                margin-right: 10px;
                cursor: pointer;
                font-size: 14px;
                line-height: 40px;
            }
            .textChoose {
                padding: 6px 14px;
                border-radius: 16px;
                margin-right: 10px;
                cursor: pointer;
                font-size: 14px;
                line-height: 40px;
            }
        }
    }

    .move-tags--medium {
        width: 500px;
        height: 45px;
        .scroll {
            width: 16px;
            height: 45px;
        }
        #box {
            height: 100%;
            overflow: hidden;
            align-items: center;
            white-space: nowrap;
            width: calc(100% - 36px);
            .text {
                padding: 6px 14px;
                border-radius: 16px;
                margin-right: 10px;
                cursor: pointer;
                font-size: 16px;
                line-height: 45px;
            }
            .textChoose {
                padding: 6px 14px;
                border-radius: 16px;
                margin-right: 10px;
                cursor: pointer;
                font-size: 16px;
                line-height: 45px;
            }
        }
    }
</style>